@prefixCls: ~'lightd-form-item-icon';

@colorPrimary: #1677ff;
@colorBorder: #d9d9d9;

.@{prefixCls} {
  &-input-wrapper {
    input {
      cursor: pointer;
    }
  }

  padding-bottom: 20px;

  &-icon-list-scroll {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  &-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px;
    padding: 8px;
    // color: #00000050;
    color: #555555;
    font-size: 24px;
    list-style: none;
    border: 1px solid @colorBorder;
    cursor: pointer;
    transition: transform 0.3s;

    &:hover {
      border: 1px solid @colorPrimary;
      transform: scale(1.2);
    }
  }
}

.lightd-form-item-icon-input {
  input[readonly] {
    cursor: pointer;
  }
}
